<!--
    当组件的状态改变时，Svelte 会自动更新 DOM。通常，组件状态的某些部分需要通过 其它 部分的计算而得出（例如 fullname 就是 firstname 和 lastname 的合体），并在 其它 部分更改时重新计算。
    对于这些，我们提供了 反应式声明（reactive declarations）。它们看起来像这样：
    let count = 0;
    $: doubled = count * 2;
    看来其有点陌生，不过别担心。上述是
    （非常规）的 JavaScript 语句，Svelte 会将其解释为 “只要参考值变化了就重新运行此代码”。一旦看习惯了，你就再也戒不掉了。
    我们在 HTML 标签内来使用 doubled：
    <p>{count} doubled is {doubled}</p>
    当然，你可以在 HTML 标签内书写 {count * 2}，而不必非得使用反应式声明的语法。但是，当你需要多次引用它们时，或者你需要的值依赖于 其它 响应式声明所计算的来的值时，响应式声明就变得特别有用。
-->

<script>
    let count = 0
    const handleClick = () => {
        count = count + 1
    }
    $: double = count * 2 // computed
</script>

<button on:click={handleClick}>click</button>
<p>{count + '--' + double}</p>
<p>{count}--{double}</p>
